<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <!-- 引入layui 样式-->
    <link rel="stylesheet" href="../../static/css/style.css"/>
    <link rel="stylesheet" href="../../static/layer/css/layui.css"/>
    <link rel="stylesheet" href="../../static/css/font-awesome.min.css">
    <link rel="stylesheet" href="../../static/ucss/hydropower/eletric_info.css"/>
</head>
<body>
<form class="layui-form">
    <div class="layui-tab layui-tab-brief" lay-filter="contractInfoTabBrief">
        <div class="layui-tab-content">
            <div class="layui-tab-item layui-show">
                <div class="tab-body">
                    <!--水电表基本信息-->
                    <div class="quote-submit-person">
                        <span class="" style="font-size: 20px">电表详情</span>
                        <span class="CODE" style="margin-left: 20px"></span>
                    </div>
                    <div class="quote-housing-info">
                        <hr>
                        <div class="conItem">
                        </div>
                        <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
                            <div class="layui-tab-item layui-show">
                                <!--房源-->
                                <blockquote class="layui-elem-quote layui-text">房源信息:</blockquote>
                                <div class="room-box" data-index="0">
                                    <div class="layui-col-xs12 PROJECT">
                                        <!--<div class="grid-demo"><label class="layui-form-label">西单/a楼</label>-->
                                        <!--</div>-->
                                    </div>
                                    <hr>
                                </div>
                            </div>
                            <!--电表信息-->
                            <blockquote class="layui-elem-quote layui-text">电表信息:</blockquote>
                            <div class="room-box" data-index="0">
                                <div class="layui-col-xs12">
                                    <div class="grid-demo"><label class="layui-form-label">电表编号:</label>
                                        <span class="layui-form-label E_CODE"></span>
                                    </div>
                                </div>
                                <div class="layui-col-xs12">
                                    <div class="grid-demo"><label class="layui-form-label">电表类型:</label>
                                        <span class="layui-form-label BTYPE"></span>
                                    </div>
                                </div>
                                <div class="layui-col-xs12">
                                    <div class="grid-demo"><label class="layui-form-label">电表属性:</label>
                                        <span class="layui-form-label ATTR"></span>
                                    </div>
                                </div>
                                <div class="layui-col-xs12">
                                    <div class="grid-demo"><label class="layui-form-label">电表倍率:</label>
                                        <span class="layui-form-label RATES"></span>
                                    </div>
                                </div>
                                <hr>
                            </div>
                            <!--抄表记录-->
                            <blockquote class="layui-elem-quote layui-text">抄表记录:</blockquote>
                            <div class="room-box" data-index="0">
                                <div class="operateTable">
                                    <div class="layui-input-inline">
                                        <input type="text" class="layui-input" id="S_DATE" placeholder="开始时间"
                                               readonly="">
                                    </div>
                                    <div class="layui-input-inline">
                                        <input type="text" class="layui-input" id="E_DATE" placeholder="结束时间"
                                               readonly="">
                                    </div>
                                    <a class="layui-btn" data-type="reload">搜索</a>
                                    <!--<a class="layui-btn" data-type="getCheckData">获取选中行数据</a>-->
                                </div>
                                <table id="MeterReadingRecord" lay-filter="tableinfo"></table>
                                <!--<script type="text/html" id="MeterReadingRecord_bar">-->
                                <div style="display: none;" id="MeterReadingRecord_bar">
                                    {{# if(d.IS_BILL != '是'){ }}
                                    <a class="layui-btn layui-btn-primary layui-btn-mini" lay-event="del">删除</a>
                                    {{# if(d.BTYPE != '总'){ }}
                                    <a class="layui-btn layui-btn-mini" lay-event="GenerateBills">生成账单</a>
                                    {{# } else { }}
                                    {{# } }}
                                    {{# } else { }}
                                    {{# } }}
                                </div>
                                <hr>
                            </div>
                            <!--用量汇总-->
                            <div class="total_use" style="display: none">
                                <blockquote class="layui-elem-quote layui-text">用量汇总:(注意：选择1个时间段内用量来对比总表和分表的差异)</blockquote>
                                <div class="room-box">
                                    <div class="operateTable">
                                        <div class="layui-input-inline">
                                            <input type="text" class="layui-input" id="S_DATE_total" placeholder="开始时间"
                                                   readonly="">
                                        </div>
                                        <div class="layui-input-inline">
                                            <input type="text" class="layui-input" id="E_DATE_total" placeholder="结束时间"
                                                   readonly="">
                                        </div>
                                        <a class="layui-btn" data-type="total_reload">搜索</a>
                                        <!--<a class="layui-btn" data-type="getCheckData">获取选中行数据</a>-->
                                    </div>
                                    <hr>
                                    <div class="layui-col-xs12">
                                        <div class="grid-demo"><label class="layui-form-label">人工抄录总计（总表）:</label>
                                            <span class="layui-form-label TotalTable">0</span>
                                        </div>
                                    </div>
                                    <div class="layui-col-xs12">
                                        <div class="grid-demo"><label class="layui-form-label">系统自动统计（子表）:</label>
                                            <span class="layui-form-label ChildTable">0</span>
                                        </div>
                                    </div>
                                    <div class="layui-col-xs12">
                                        <div class="grid-demo"><label class="layui-form-label">差异用量:</label>
                                            <span class="layui-form-label differential_usage"
                                                  style="color: red">0</span>
                                        </div>
                                    </div>
                                    <hr>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</form>
</body>
<script type="text/javascript" src="../../static/layer/layui.js"></script>
<script type="text/javascript" src="../../static/js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="../../static/js/common/queryUtils.js"></script>
<script type="text/javascript" src="../../static/js/common/typeUtils.js"></script>
<script type="text/javascript" src="../../static/js/common/authUtils.js"></script>
<script type="text/html" id="CUR_DEGREESTemp">
    {{#  if(d.IS_BILL != '是'){ }}
    <input type="text" class="layui-input"  id="{{(d.CUR_DEGREES == undefined)?'':d.CUR_DEGREES}}"
           value="{{(d.CUR_DEGREES == undefined)?'':d.CUR_DEGREES}}"/>
    {{#  } else { }}
        {{d.CUR_DEGREES}}
    {{#  } }}
</script>
<script>
    var $, element, layer, laydate, form;
    // 加载元素控件
    var CODE;
    layui.use(['jquery', 'element', 'layer', 'laydate', 'form', 'table'], function () {
        $ = layui.jquery,
            element = layui.element,
            layer = layui.layer,
            laydate = layui.laydate,
            form = layui.form,
            table = layui.table;
        //获取当前月
        var date_ = new Date();
        var year = date_.getFullYear();
        var month = date_.getMonth() + 1;
        var paystar = year + '-' + month + '-01'
        var day = new Date(year, month, 0);
        var payend = year + '-' + month + '-' + day.getDate();
        // $("#S_DATE").val(paystar);
        // $("#E_DATE").val(payend);
        $("#S_DATE_total").val(paystar);
        $("#E_DATE_total").val(payend);
        laydate.render({
            elem: '#E_DATE'
            , trigger: 'click'
            , btns: ['now', 'confirm']
            , done: function (value, date, endDate) {
                $("#E_DATE").val(value);
                // active.reload();
                init.QueryUsage();
            }
        });
        laydate.render({
            elem: '#S_DATE'
        });
        laydate.render({
            elem: '#S_DATE_total'
        });
        laydate.render({
            elem: '#E_DATE_total'
        });
        CODE = QueryUtils.GetQueryString("CODE");
        //加载详情页信息
        init.initEInfo(CODE);
        //加载 总表 和子表的 参数
        init.QueryUsage();
        //加载电表数据
        table.render({
            elem: '#MeterReadingRecord'
            , url: '/hydropowerdetail/hydropowerInfoList'
            , where: {CODE: CODE}
            , cols: [[ //标题栏
                {checkbox: true, LAY_CHECKED: false} //默认全选
                , {field: 'CUR_DATE', title: '抄表时间', width: 250, templet: '#emptyTemp'}
                , {field: 'CUR_DEGREES', title: '本次读数',edit:"text",width: 150, style: 'cursor: pointer;', templet: '#CUR_DEGREESTemp'}
                , {field: 'IS_BILL', title: '是否已生产账单', width: 150, templet: '#curDate'}
                , {field: 'right', title: '操作', width: 150, align: 'center', templet: '#MeterReadingRecord_bar'}
            ]]
            , id: 'MeterReadingRecord'
            , page: true
            , limit: '10'
        });
        //监听单元格编辑
        table.on('edit(tableinfo)', function (obj) {
            var value = obj.value //得到修改后的值
                , data = obj.data //得到所在行所有键值
                , field = obj.field; //得到字段
            //修改当前读数
            $.ajax({
                type: "post",
                url: "/hydropowerdetail/edit_info",
                async: true,
                data: {
                    id: data.ID,
                    curDegrees: value,
                },
                success: function (rs) {
                    layer.msg('修改电表读数为:' + value);
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                }
            });
        });
        var active = {
            //搜索重新加载表格
            reload: function () {
                var S_DATE = $("#S_DATE").val();
                var E_DATE = $("#E_DATE").val();
                table.reload('MeterReadingRecord', {
                    where: {S_DATE: S_DATE, E_DATE: E_DATE, CODE: CODE}
                });
            },
            //删除抄表记录
            del: function (d) {
                $.ajax({
                    type: "post",
                    url: "/hydropowerdetail/del_GenerateBills",
                    async: false,
                    data: {
                        id: d.ID
                    },
                    success: function (res) {
                        layer.msg(res.errmsg);
                        active.reload();
                    },
                    error: function (XMLHttpRequest, textStatus, errorThrown) {
                    }
                });
            },
            //生成账单
            GenerateBills: function (d) {
                //假如选中了其中2个月的
                var checkStatus = table.checkStatus('MeterReadingRecord')
                    , data = checkStatus.data;
                if (data != "") {
                    if (data.length != 2) {
                        layer.msg("请选择2个抄表日期");
                    } else {
                        $.ajax({
                            type: "post",
                            url: "/hydropowerdetail/GenerateBills",
                            async: false,
                            data: {
                                data: JSON.stringify(data),
                                id: d.ID,
                                CUR_DEGREES: d.CUR_DEGREES,
                                eid: d.EID,
                                type: d.TYPE,
                                time: d.CUR_DATE
                            },
                            success: function (res) {
                                layer.msg(res.errmsg);
                                active.reload();
                            },
                            error: function (XMLHttpRequest, textStatus, errorThrown) {
                            }
                        });
                    }
                } else {
                    var result;
                    $.ajax({
                        type: "post",
                        url: "/hydropowerdetail/GenerateBills",
                        async: false,
                        data: {
                            id: d.ID,
                            CUR_DEGREES: d.CUR_DEGREES,
                            eid: d.EID,
                            type: d.TYPE,
                            time: d.CUR_DATE
                        },
                        success: function (rs) {
                            layer.msg(rs.errmsg);
                            active.reload();
                        },
                        error: function (XMLHttpRequest, textStatus, errorThrown) {
                        }
                    });
                }
            },
            getCheckData: function () { //获取选中数据
                var checkStatus = table.checkStatus('MeterReadingRecord')
                    , data = checkStatus.data;
                layer.alert(JSON.stringify(data));
            },
            total_reload: function () {
                var S_DATE = $("#S_DATE_total").val();
                var E_DATE = $("#E_DATE_total").val();
                var data = {
                    ID: CODE,
                    S_DATE: S_DATE,
                    E_DATE: E_DATE,
                }
                $.ajax({
                    url: "/hydropowerdetail/amount_difference",
                    data: data,
                    dataType: "json",
                    type: "post",
                    async: false,
                    success: function (res) {
                        if (res.errcode === "00") {
                            if (!!res) {
                                //计算总表读数
                                var total_cur=0;
                                var child_cur=0;
                                if (!!res.data) {
                                    total_cur=res.data.CUR_DEGREES;
                                    $(".TotalTable").html(total_cur);
                                } else {
                                    $(".TotalTable").html(0);
                                }
                                //计算分表 读数
                                if (!!res.childern_list) {
                                    child_cur=res.childern_list.CUR_DEGREES;
                                    $(".ChildTable").html(child_cur);
                                } else {
                                    $(".ChildTable").html(0);
                                }
                                //差异用量
                                $(".differential_usage").html(total_cur - child_cur);
                            }
                        } else if (res.errcode === "01") {
                            layer.msg(res.errmsg, function () {
                            });
                        }
                    },
                    error: function (XMLHttpRequest, textStatus, errorThrown) {
                        console.error(XMLHttpRequest.status);
                        console.error(XMLHttpRequest.readyState);
                        console.error(textStatus);
                    }
                });
            }

        }

        //监听工具条按钮
        table.on('tool(tableinfo)', function (obj) {
            var data = obj.data;
            active[obj.event] ? active[obj.event].call(this, data) : '';
        });
        $('.operateTable .layui-btn').on('click', function () {
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });
    });
    //所有方法
    var init = {
        // 通过水电表ID获取详情
        initEInfo: function (CODE) {
            $.ajax({
                url: "/hydropowerdetail/find_info_by_EID",
                data: {ID: CODE},
                dataType: "json",
                type: "post",
                async: false,
                success: function (res) {
                    if (res.errcode === "00") {
                        //赋值
                        if (!!res) {
                            $(".CODE").html(res.data[0].CODE);
                            $(".E_CODE").html(res.data[0].CODE);
                            $(".BTYPE").html(res.data[0].BTYPE);
                            if ("总表" === res.data[0].BTYPE) {
                                $(".total_use").show();
                            }
                            $(".ATTR").html(res.data[0].ATTR);
                            $(".RATES").html(res.data[0].RATES);
                            for (var i = 0; i < res.data.length; i++) {
                                $(".PROJECT").append('<div class="grid"><label class="layui-form-label ">' + res.data[i].PROJECTID + '</label>\n' +
                                    '                                        </div>');
                            }
                        }
                    } else if (res.errcode === "01") {
                        layer.msg(res.errmsg, function () {
                        });
                    }
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    console.error(XMLHttpRequest.status);
                    console.error(XMLHttpRequest.readyState);
                    console.error(textStatus);
                }
            });
        },
        //根据时间段 查询 总表 用量 分表用量 等 对比用量差值
        QueryUsage: function () {
            var S_DATE = $("#S_DATE_total").val();
            var E_DATE = $("#E_DATE_total").val();
            var data = {
                ID: CODE,
                S_DATE: S_DATE,
                E_DATE: E_DATE,
            }
            $.ajax({
                url: "/hydropowerdetail/amount_difference",
                data: data,
                dataType: "json",
                type: "post",
                async: false,
                success: function (res) {
                    if (res.errcode === "00") {
                        if (!!res) {
                            //计算总表读数
                            var total_cur=0;
                            var child_cur=0;
                            if (!!res.data) {
                                total_cur=res.data.CUR_DEGREES;
                                $(".TotalTable").html(total_cur);
                            } else {
                                $(".TotalTable").html(0);
                            }
                            //计算分表 读数
                            if (!!res.childern_list) {
                                child_cur=res.childern_list.CUR_DEGREES;
                                $(".ChildTable").html(child_cur);
                            }else {
                                $(".ChildTable").html(0);
                            }
                            //差异用量
                            $(".differential_usage").html(total_cur - child_cur);
                        }
                    } else if (res.errcode === "01") {
                        layer.msg(res.errmsg, function () {
                        });
                    }
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    console.error(XMLHttpRequest.status);
                    console.error(XMLHttpRequest.readyState);
                    console.error(textStatus);
                }
            });

        }
    }
</script>
</html>